<template>
  <div id="userLayout">
    <div class="userLayout-top clearfix">
      <!--      todo 去掉logo,后续放开-->
      <!--      <div class="userLayout-top-logo">-->
      <!--        <img style="width: 100%" src="@/assets/logo.png" alt="" />-->
      <!--      </div>-->
      <div class="userLayout-top-left">
        <span class="userLayout-top-left-name-lg userLayout-top-left-name">
          石油化工基础物性数据库后台管理系统
        </span>
        <span class="userLayout-top-left-name-xs userLayout-top-left-name">
<!--          PCdata石化行业物性数据管理系统-->
          石油化工基础物性数据库后台管理系统
        </span>
      </div>
      <div class="userLayout-top-right">
<!--        <div v-if="!userName" style="position: relative">-->
<!--          <span class="userLayout-top-right-login" @click="showLogin(1)">登录</span>-->
<!--          <span-->
<!--            style="-->
<!--              margin: 0 6px;-->
<!--              font-size: 14px;-->
<!--              color: rgba(10, 27, 57, 1);-->
<!--              position: relative;-->
<!--              top: -2px;-->
<!--            "-->
<!--          >-->
<!--            |-->
<!--          </span>-->
<!--          <span class="userLayout-top-right-register" @click="showLogin(2)">注册</span>-->
<!--        </div>-->
        <div v-if="userName">
          <span
            class="userLayout-top-right-name"
            style="font-size: 16px; color: #0a1b39; margin-right: 10px"
          >
            {{ userName }}
          </span>
          <a-popover placement="bottomRight">
            <template #content>
<!--              <div style="cursor: pointer;margin-bottom: 10px;" @click="toSet">-->
<!--                <SettingOutlined size="18"/>-->
<!--                <span style="margin-left: 8px">个人设置</span>-->
<!--              </div>-->
              <div style="cursor: pointer" @click="loginOut">
                <img style="width: 18px; margin-top: -3px" src="@/assets/icon_quit@2x.png" alt=""/>
                <span style="margin-left: 8px">退出登录</span>
              </div>
            </template>
            <img style="width: 40px; cursor: pointer" src="@/assets/defaultAvatar.png" alt=""/>
          </a-popover>
        </div>
      </div>
    </div>
    <div class="userLayout-container">
      <router-view/>
      <!--      <footerDetail></footerDetail>-->
    </div>
  </div>
  <a-modal
    v-model:open="isShowLogin"
    :footer="null"
    :width="640"
    :bodyStyle="{
      background: 'linear-gradient( 180deg, #FFFFFF 0%, #E3E8F3 100%)',
      borderRadius: '16px',
    }"
  >
    <login :type="type" v-if="isShowLogin" @loginSuccess="loginSuccess"></login>
  </a-modal>
</template>

<script>
import footerDetail from '../views/components/footerDetail.vue';
import login from '../views/login/login.vue';
import {UserOutlined,SettingOutlined} from '@ant-design/icons-vue';

import {LOGOUT, useUserStore} from '@/store/user';
import {message} from 'ant-design-vue';
import {loginRoutePath} from '@/router/define-meta';

export default {
  name: 'userLayout',
  components: {
    //组件
    login,
    footerDetail,
    UserOutlined,
    SettingOutlined,
  },
  beforeRouteLeave(to, form, next) {
    //路由跳转
    next();
  },
  props: {
    //传参
  },
  data() {
    return {
      userStore: null,
      type: 1, //
      isShowLogin: false,
    };
  },
  computed: {
    //计算属性
    userName() {
      const token = !!(
        this.userStore &&
        this.userStore.currentUser &&
        this.userStore.currentUser.token
      );
      return token ? this.userStore.currentUser.username : '';
    },
  },
  watch: {
    '$route'(newRoute) {
      //todo 管理员登录接口  增加isAdmin字段
      const element = document.querySelector(".userLayout-container");
      element.scrollTop = 0
    },
  },
  mounted() {

    //挂载完毕
    document.body.classList.add('userLayout');
    this.userStore = useUserStore();
    if (this.$route?.query?.login == 'true') {

    }else {

    }


  },
  activated() {
    //激活页面
  },
  beforeUnmount() {
    document.body.classList.remove('userLayout');
  },
  methods: {
    /**
     * 跳转到个人中心
     */
    toSet(){
      this.$router.push('personalSet')
    },
    /**
     * 是否显示登录
     */
    showLogin(params) {
      this.type = params;
      this.isShowLogin = true;
    },
    /**
     * 登录成功
     * @param name
     */
    //todo 管理员登录接口  增加isAdmin字段
    loginSuccess(isAdmin) {
      if (isAdmin) {
        this.$router.push('/adminManagement');
        this.isShowLogin = false;
      } else {
        this.$router.push(loginRoutePath);
        this.isShowLogin = false;
      }
    },
    /**
     * 退出登录
     */
    loginOut() {
      this.userStore
        .LOGOUT()
        .then(res => {
          this.$router.push({
            name: 'search',
          });
        })
        .catch(err => {
        });
    },
  },
};
</script>

<style lang="less">
#userLayout {
  height: 100vh;

  .userLayout-top {
    display: flex;
    height: 56px;
    align-items: center;
    padding-left: 40px;

    .userLayout-top-logo {
      width: 105px;
    }

    .userLayout-top-left {
      flex: 1;

      .userLayout-top-left-name {
        display: inline-block;
        padding-left: 16px;
        font-weight: 500;
        font-size: 20px;
        color: #000000;
      }
    }

    .userLayout-top-right {
      width: 240px;
      text-align: right;
      padding-right: 16px;

      .userLayout-top-right-register,
      .userLayout-top-right-login {
        cursor: pointer;
      }

      .userLayout-top-right-register:hover,
      .userLayout-top-right-login:hover {
        color: #00a0e9;
      }
    }
  }

  .userLayout-container {
    height: calc(100vh - 64px);
    overflow-y: auto;
  }
}

#userLayout .userLayout-top .userLayout-top-left .userLayout-top-left-name-xs {
  display: none;
}

#userLayout .userLayout-top .userLayout-top-left .userLayout-top-left-name-lg {
  display: block;
}
</style>
<style scoped>
@media screen and (max-width: 700px) {
  .userLayout-top-logo {
    display: none !important;
  }

  #userLayout .userLayout-top .userLayout-top-left .userLayout-top-left-name {
    padding-left: 0;
  }

  #userLayout .userLayout-top {
    padding-left: 16px;
  }

  #userLayout .userLayout-top .userLayout-top-left .userLayout-top-left-name {
    font-size: 18px;
  }

  #userLayout .userLayout-top .userLayout-top-left .userLayout-top-left-name-xs {
    display: block;
  }

  #userLayout .userLayout-top .userLayout-top-left .userLayout-top-left-name-lg {
    display: none;
  }

  #userLayout .userLayout-top .userLayout-top-right {
    width: 120px;
  }

  #userLayout .userLayout-top .userLayout-top-right .userLayout-top-right-name {
    display: none;
  }
}
</style>
